/* shop */
.shop{
	display: flex;
	justify-content: space-around;
	margin-bottom: 4em;
	cursor: pointer;
	.item{
		position: relative;
		text-align: center;
		width: 18%;
		height: 13em;
		line-height: 10em;
		box-shadow: 3px 2px 6px 5px;
		background-color: #8a7e79;
		z-index: -1;
		h1{
			position: absolute;
			font-size: 3rem;
			left:35%;
			bottom: 0;
			color: white;
		}
	}
	.itemz{
		margin: 0 -2em;
		margin-top: 4em;
	}
}
@media screen and (max-width:750px){
	.shop{
		flex-wrap: wrap;
		.item{
			width:31%;
			margin: 5px 5px;
			&:nth-child(7){
				
				margin-left: -15%;
			}
			&:nth-child(9){
				
				margin-right: -49%;
			}
		}
		.itemz{
			display: none;
		}
	}
}
@media screen and (max-width:500px){
	.shop{
		flex-wrap: wrap;
		.item{
			width:46%;
			margin: 5px 5px;
			&:nth-child(7){	
				margin-left: 0%;
			}
			&:nth-child(9){
				margin-right: 0%;
				margin-left: -15%;
			}
		}
		.itemz{
			display: none;
		}
	}
}

// shopso
.shopso{
	margin-bottom: 4em;
	h1{
		color: white;
		font-weight: bold;
		font-size: 2rem;
		line-height: 1.2em;
	}
	ul{
		li{
			font-weight: bold;
		}
	}
}

//cart
.cart{
	margin-bottom: 6em;
	.table{
		thead{
			tr{
				th{
					font-size: 1.2em;
					color: white;
					text-align: center;
					&:nth-child(5){
						width: 15%;
					}
				}
			}
		}
		tbody{
			tr{
				&:nth-child(6){
					border-bottom: 1px solid #ccc;
				}
				td{
					font-size: 1.5em;
					font-weight: bold;
					text-align: center;
					&:nth-child(1){
						img{
							width: 6em;
							cursor: pointer;
							
						}
					}
					&:nth-child(2){
						&:hover{
							color:red;
						}
					}
					&:nth-child(3){
						span{
							display: inline-block;
							width: 2em;
							height: 1.3em;
							background-color: rgba(255,255,255,.7);
							background-position: center;
							
						}
						img{
							width: .6em;
							cursor: pointer;
						}
					}
					&:nth-child(5){
						color:red;
					}
					&:nth-child(6){
						label{
							width: 1em;
							height: 1em;
							border: 3px solid #ccc;
							cursor: pointer;
							
						}
						label:hover{
							background-color: #000000;
						}
					}
				}
			}
		}
		
	}
	
}
@media screen and (max-width:520px){
	.cart{
		.table{
			thead{
				tr{
					th{
						&:nth-child(2){
							width: 15%;
						}
						
						&:nth-child(3){
							width: 15%;
						}
						&:nth-child(4){
							width: 15%;
						}
						&:nth-child(5){
							width: 20%;
						}
						&:nth-child(6){
							width: 15%;
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width:420px){
	.cart{
		.table{
			thead{
				tr{
					th{
						font-size: 1em;
						&:nth-child(1){
							width: 20%;
						}
						&:nth-child(2){
							width: 17%;
						}
						
						&:nth-child(3){
							width: 15%;
						}
						&:nth-child(4){
							width: 11%;
						}
						&:nth-child(5){
							width: 20%;
						}
						&:nth-child(6){
							width: 33%;
						}
					}
				}
			}
			tbody{
				tr{
					td{
						font-size: 1.2em;
					}
				}
			}
		}
	}
}
@media screen and (max-width:320px){
	.cart{
		.table{
			thead{
				tr{
					th{
						font-size: .8em;
						&:nth-child(1){
							width: 15%;
						}
						&:nth-child(2){
							width: 17%;
						}
						
						&:nth-child(3){
							width: 15%;
						}
						&:nth-child(4){
							width: 15%;
						}
						&:nth-child(5){
							width: 20%;
						}
						&:nth-child(6){
							width: 33%;
						}
					}
				}
			}
			tbody{
				tr{
					td{
						font-size: 1em;
					}
				}
			}
		}
	}
}




